

<html>
 <head>
 	<title>Nghe nhạc trực tuyến</title>
  <link rel="shortcut icon" type="image/ico" href="<?php echo base_url().'template/icon/icon.png'; ?>" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 	<script type="text/javascript" src="<?php echo base_url();?>template/js/jquery.js"></script>
  <script type="text/javascript" src="<?php echo $js_path.'jquery.min.js'; ?>"></script>
  <script type="text/javascript" src="<?php echo $js_path.'jquery-ui.js'; ?>"></script>
   <script type="text/javascript" src="<?php echo base_url().'third_party/rochaScroll/slimScroll.min.js'; ?>"></script>
  <script type="text/javascript" src="<?php echo base_url().'third_party/johnyer/mediaelement-and-player.min.js'; ?>"></script>
 <link rel="stylesheet" href="<?php echo base_url().'third_party/johnyer/mediaelementplayer.min.css' ?>">

  <link rel="stylesheet" type="text/css" href="<?php echo $css_path.'homepage.css';?>"/>
  <link rel="stylesheet" type="text/css" href="<?php echo $css_path.'content-center.css';?>"/>
  <link rel="stylesheet" type="text/css" href="<?php echo $css_path.'content-navright.css';?>"/>
  <link rel="stylesheet" type="text/css" href="<?php echo $css_path.'content-left-topic.css'; ?>" />
  <link rel="stylesheet" type="text/css" href="<?php echo $css_path.'content-left-zone.css'; ?>" />
  <link rel="stylesheet" type="text/css" href="<?php echo $css_path.'content-center-play.css'; ?>">


 </head>

 <body>
    <div id="container">
        <div id="wrapper-header">
          <?php //include_once('module/header.php'); ?></div>
        <div id="wrapper-content" >
          <div id="content-center-play" class="content">                  
              <div id="listPlay-info">
                <div id="listPlay-info-img">
                  <img src="<?php echo base_url().'template/image/bxhvn.jpg'; ?>" alt="BXH">
                </div>
                <div id="listPlay-info-detail">
                    <h2 id="listPlay-info-title">Nhạc Hot Tháng 9</h2>
                    <span id="listPlay-info-userPlist">Tạo bởi: Hungzom</span>
                    <span id="listPlay-info-date"></span>
                    <div id="listPlay-info-review">Tuyển tập những bài hát được nghe nhiều nhất từ đầu thành 9 đến thời điểm hiện tại</div>
                </div>
              </div>
              <div id="mediaplayer" >
                <div id=bannerplay>
                  <img src="<?php echo base_url().'template/image/bannerplay1.png'; ?>" height="150px" width="650px" alt="I Love Music">
                  <div id="background"> </div>
                  <div id="info-songitem">
                    <?php 
                      echo "<span class='infor-lable'>Bài Hát: </span>
                            <span id='infor-label-filename'>{$list_song[0]['strFileName']}</span>";
                      if(strlen($list_song[0]['strArtist'])>0) {
                        echo "
                        <span class='infor-lable'> | </span> 
                        <span class='infor-lable'> Ca Sỹ: </span>  
                        <a id='infor-label-artist' href=''> {$list_song[0]['strArtist']}</a> 
                        ";
                      }
                      if(strlen($list_song[0]['strExtraArtist'])>0) {
                        echo "<span id='space' class='infor-lable'>-</span>
                              <a id='infor-label-exartist' href=''>{$list_song[0]['strExtraArtist']}</a>";
                      }
                     ?>
                    
        
                    
                  </div>
                </div>
                <div id="control-media">
                  <audio id="player2"  autoplay="autoplay" data-current="1" src="<?php echo base_url().'upload/song/'.$list_song[0]['strPath']; ?>" preload type="audio/mp3" controls="controls" width="650px" preload="none">    
                  </audio>
                </div>
                
                   <?php 
                if(count($list_song)>1) {
                  echo "<div id='listsong' >
                  <ul id='playlist'>";
                  $i=1;
                  while ($i<count($list_song)+1) {
                    # code...
                    echo "
                     <li path-data='{$list_song[$i-1]['strPath']}' data-track='{$i}' data-artist='{$list_song[$i-1]['strArtist']}' data-ExtArtist='{$list_song[$i-1]['strExtraArtist']}' class='itemsong'>
                     <span class='list-order'>{$i}</span>
                     <span class='list-itemTitle'>{$list_song[$i-1]['strFileName']}</span>
                     <span class='list-itemArtist'>{$list_song[$i-1]['strArtist']}</span>
                     <span class='list-itemAction'>
                        <a href='' title='Download' class='list-itemaction-download'> </a>
                        <a href='' title='Add Playlist' class='list-itemAction-addToList'> </a>
                        <a href='' title='Nghe {$list_song[$i-1]['strFileName']}' class='playItemOnly'> </a>
                        </span>
                      </li>
                      
                    ";
                    $i++;
                  }
                  echo "</ul> </div>";
                  }?>
                 
              </div>
          </div>

          <div id="content-navright" class="content">
            <div id="content-navright-rank">
              <?php include_once('module/content-navright-rank.php') ?>
            </div>

          </div>

        </div>

        <div id="wrapper-footer"></div>

      </div>
 </body>
 <script type="text/javascript">
$('audio,audio').mediaelementplayer();
$('#playlist').slimScroll({
    position: 'right',
    height: 'inherti',
    color: '#f3f3f3',
                    railVisible: true,
                    alwaysVisible: true
});


$('.itemsong').bind('click',function(){
    $('.itemsong').css('color','white');
    $(this).css('color','#54c5ff');
        var totalTracks=$(".itemsong").length;
        $('#infor-label-filename').html($(this).find(":nth-child(2)").text());
        $('#infor-label-artist').html($(this).attr('data-artist'));  
        if($(this).attr('data-ExtArtist').length==0) {
          $('#space').html('');
        }else {
          $('#space').html('-');
        }      
        $('#infor-label-exartist').html($(this).attr('data-ExtArtist'));
        $('#player2').attr("src","<?php echo base_url().'upload/song/';?>"+$(this).attr('path-data'));
        $('#player2').attr("data-current",$(this).attr('data-track'));
        $("#player2").get(0).load();
        $("#player2").get(0).play();
        // if($(this).attr("data-current")*1==totalTracks) {
        //   $('#playlist').scrollTop(elem.offset().top);
        // }
          
        // if($(this).attr("data-current")==1) {
        //   $('#playlist').scrollBottom(elem.offset().top);
        // }
           
});

$("#player2").bind("ended",function() {
  var totalTracks=$(".itemsong").length;
  totalTracks=totalTracks*1;
    currentTrack = $("#player2").attr('data-current');
    newTrack = currentTrack*1+1;
    $('#infor-label-filename').html($("li[data-track='"+newTrack+"']").find(":nth-child(2)").text());
    $('#infor-label-artist').html($("li[data-track='"+newTrack+"']").attr('data-artist'));  
    if($("li[data-track='"+newTrack+"']").attr('data-ExtArtist').length==0) {
      $('#space').html('');
      }else {
        $('#space').html('-');
      }
    if(newTrack <= totalTracks+1) {
     $("#player2").attr("src","<?php echo base_url().'upload/song/';?>"+$("li[data-track='"+newTrack+"']").attr('path-data'));
     $('#player2').attr("data-current",newTrack);
     $("#player2").get(0).load();
     $("#player2").get(0).play();
     $('.itemsong').css('color','white');
   $("li[data-track='"+newTrack+"']").css('color','#54c5ff') ;     
        $('#infor-label-exartist').html($("li[data-track='"+newTrack+"']").attr('data-ExtArtist'));
    } else { return false;}
});


$(".itemsong").hover(function(){
 $(this).children(":first-child").html("<img src='<?php echo base_url().'template/icon/itemplay.png'; ?>' width='18px' height='18px'>");
  },function(){
     $(this).children(":first-child") .html($(this).attr("data-track"));
  }
);


$(document).ready(function() {
    // put all your jQuery goodness in here.
    $('.itemsong:first').css('color','#54c5ff');
});

 </script>
 </html>